<ng-container *ngIf="(workflows && workflows.length) || (projects && projects.length)">
    <nz-row>
        <nz-col [nzSpan]="6">
            <nz-card [nzActions]="[actionSetting]">
                <nz-card-meta
                        nzTitle="Add a bookmark"
                        [nzDescription]="descriptionTmpl"
                ></nz-card-meta>
            </nz-card>
            <ng-template #descriptionTmpl>
                <nz-select [(ngModel)]="newFav.type" nzPlaceHolder="Select a favorite type">
                    <nz-option nzLabel="project" nzValue="project"></nz-option>
                    <nz-option nzLabel="workflow" nzValue="workflow"></nz-option>
                </nz-select>
                <ng-container *ngIf="newFav.type === 'project'">
                    <nz-select nzShowSearch nzPlaceHolder="Select a project"
                               [(ngModel)]="newFav"
                               #selectProj>
                        <nz-option *ngFor="let p of filteredProjects" [nzLabel]="p.name" [nzValue]="p"></nz-option>
                    </nz-select>
                </ng-container>
                <ng-container *ngIf="newFav.type === 'workflow'">
                    <nz-select nzShowSearch nzPlaceHolder="Select a project" [(ngModel)]="projectKeySelected">
                        <nz-option *ngFor="let p of projects" [nzLabel]="p.name" [nzValue]="p.key"></nz-option>
                    </nz-select>
                </ng-container>
                <ng-container *ngIf="newFav.type === 'workflow' && projectKeySelected">
                    <nz-select nzShowSearch nzPlaceHolder="Select a workflow"
                               [(ngModel)]="newFav"
                               #selectWf>
                        <nz-option *ngFor="let w of filteredWf" [nzLabel]="w.workflow_name" [nzValue]="w"></nz-option>
                    </nz-select>
                </ng-container>
            </ng-template>
            <ng-template #actionSetting>
                <button nz-button nzType="link" (click)="updateFav(newFav)">
                    <i nz-icon nzType="plus"></i> Add to my bookmarks
                </button>
            </ng-template>
        </nz-col>
        <nz-col [nzSpan]="6" *ngFor="let favorite of favorites">
            <ng-template #extraTmpl>
                <ng-container [ngSwitch]="favorite.type">
                    <ng-container *ngSwitchCase="'workflow'">
                        <span nz-icon nzType="share-alt" nzTheme="outline" *ngIf="!favorite.icon"></span>
                        <img width="32" [src]="favorite.icon" *ngIf="favorite.icon" alt="workflow logo">
                    </ng-container>
                    <ng-container *ngSwitchDefault>
                        <span nz-icon nzType="profile" nzTheme="outline" *ngIf="!favorite.icon"></span>
                        <img  width="32" [src]="favorite.icon" *ngIf="favorite.icon" alt="project logo">
                    </ng-container>
                </ng-container>
            </ng-template>
            <ng-template #favTitle>
                <ng-container *ngIf="favorite.type === 'workflow'">
                    <a class="header" href="#"
                       [routerLink]="['/project', favorite.key, 'workflow', favorite.workflow_name]">
                        {{favorite.workflow_name}}
                    </a>
                </ng-container>
                <ng-container *ngIf="favorite.type === 'project'">
                    <a class="header" href="#" [routerLink]="['/project', favorite.key]">
                        {{favorite.name}}
                    </a>
                </ng-container>
            </ng-template>
            <ng-template #favDescTmpl>
                <ng-container *ngIf="favorite.type === 'workflow'">
                    <div>
                        Workflow in <a class="projectLink" href="" [routerLink]="['/project', favorite.key]">{{favorite.key}}</a>
                    </div>
                    <div>
                        {{favorite.description}}
                    </div>
                </ng-container>
                <ng-container *ngIf="favorite.type === 'project'">
                    <div>
                       Project
                    </div>
                    <div>
                        {{favorite.description}}
                    </div>
                </ng-container>
            </ng-template>
            <ng-template #favActionsTmpl>
                <button nz-button nzType="link" (click)="updateFav(favorite)" [disabled]="loading[favorite.key + favorite.workflow_name]">
                    <i nz-icon nzType="delete"></i>Delete from bookmarks
                </button>
            </ng-template>
            <nz-card [nzActions]="[favActionsTmpl]">
                <nz-card-meta
                        [nzTitle]="favTitle"
                        [nzDescription]="favDescTmpl"
                        [nzAvatar]="extraTmpl"
                ></nz-card-meta>
            </nz-card>
        </nz-col>
    </nz-row>
</ng-container>


